import _ from "lodash";
import { computed, defineComponent, onMounted } from "vue";
import Characters from "./Characters";
import CharactersCarousel from "./CharactersCarousel";
import NationList from "./NationList";
import styles from "./index.module.scss";
import { useYsStore } from "./store";

/**
 * ext
 * 742_1 PC 图片
 * 742_2 人物立绘
 * 742_3 手机端横条
 * 742_4 白天背景
 * 742_5 黄昏背景
 * 742_6 手机端黄昏北京
 */

const YsView = defineComponent({
  setup() {
    const ysStore = useYsStore();

    // TODO: 背景图片轮播！！
    const bgImageUrl = computed(() => {
      const it = _.get(ysStore.activeNation, "ext.742_5[0]");
      if (typeof it === "string") {
        return null;
      }
      return _.get(it, "url");
    });

    const handleNationSelected = (key: string) => {
      ysStore.setActiveNationKey(key);
    };

    onMounted(() => {
      ysStore.loadNations().then(() => {
        ysStore.setActiveNationKey(ysStore.nations[0].key);
      });
    });

    return () => (
      <div class={styles["nation-container"]} style={`background-image: url("${bgImageUrl.value}");`}>
        <NationList activeNationKey={ysStore.activeNationKey} onActiveNationChange={handleNationSelected} />
        <CharactersCarousel />
      </div>
    );
  },
});

export default YsView;
